<template>
	<!-- 头部 -->
	<headerVue :HeadIndex="2"></headerVue>
	<div class="page">
		<div class="tdetail">
			<div class="w1400">
				<div class="location">当前位置 ：<a href="/">首页</a> &gt; <a href="/designer">设计团队</a> &gt; <a
						href="javascript:void(0)">李元霸</a></div>
				<div class="tdetailc">
					<div class="tdetailcl fl"><img src="../../assets/rp.jpg" alt="李元霸"></div>
					<div class="tdetailcr fr">
						<div class="tit">李元霸<span>总设计师</span></div>
						<div class="con">
							<div class="cont">
								<table width="100%">
									<tbody>
										<tr>
											<td width="74">从业经验:</td>
											<td><span class="num">22</span>年 &nbsp;&nbsp; 案例作品: <span
													class="num">10</span>
												套</td>
										</tr>
										<tr>
											<td style=" line-height:25px;">设计风格:</td>
											<td style=" line-height:25px;">
												<span onclick="goto_style_url('1201')" class="fg">现代简约</span>
												<span onclick="goto_style_url('1203')" class="fg">新中式</span>
												<span onclick="goto_style_url('1209')" class="fg">欧式</span>
												<span onclick="goto_style_url('1210')" class="fg">美式</span>
											</td>
										</tr>
										<tr>
											<td width="74">设计理念:</td>
											<td>
												<div class="cc">以人为本，针对客户年龄、职业、爱好、文化层次等特点，根据客户主观方面的个人喜好，“因人而异”。</div>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
							<div class="conc">
								<table width="100%">
									<tbody>
										<tr>
											<td width="74">个人资质：</td>
											<td>
												<div class="cc">星艺华北区设计院总设计师 </div>
											</td>
										</tr>
										<tr>
											<td width="74" style=" vertical-align: baseline;">获奖情况：</td>
											<td>
												<div class="cc">
													设计作品于1998年入围深圳蔚蓝海岸杯设计大赛并获优秀奖 <br>2002年于上海同济大学进修艺术设计
													<br>2002年入围中国建筑装饰协会举办建筑装饰工程奖（住宅类）优秀奖 <br>2005年于北京大学进修学习企业管理

												</div>
											</td>
										</tr>
										<tr>
											<td width="74">代表作品：</td>
											<td>
												<div class="cc">
													蒙地卡罗、地球村、半岛兰湾、京基领域、万科水晶城等 </div>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
					<div class="cl"></div>
					<a href="javascript:void(0)" class="td_sj onlinec_g" data-id="695">找他设计</a>
				</div>


			</div>
		</div>
		<!-- 列表 -->
		<itemVue></itemVue>
	</div>
	<!-- 底部 -->
	<footerVue></footerVue>
</template>

<script setup>
	import headerVue from '../../components/header.vue';
	import footerVue from '../../components/footer.vue';
	import itemVue from './item.vue';

	import { designDetailsApi } from '@/api/index.js'
	// 接受路由query参数
	const route = useRoute();
	const id = route.query.id;

	onMounted(async() => {
		try{
			const res = await designDetailsApi({ id });
		}catch{

		}

	})



</script>

<style scoped lang="less">
	.page {
		background: #f1f1f1;
	}

	.tdetail {
		width: 100%;
		height: auto;
		background: url(../../assets/imgs/design/banner.jpg) no-repeat center center/cover;
		padding: 20px 0 70px 0;
	}

	.tdetail .location {
		color: #fff;
		margin-bottom: 18px;
		line-height: 30px;

	}

	.tdetail .location a {
		font-size: 14px;
		color: #fff;
	}

	.tdetail .location a:hover {
		text-decoration: underline;
	}

	.w1400 {
		width: 1400px;
		margin: 0 auto;
	}

	.tdetailc {
		width: 100%;
		height: auto;
		padding: 25px 45px 45px 25px;
		background: url(https://xystcdn.xydec.com.cn/static/xy2022/images/tdetail_banner_c.jpg) no-repeat center center/cover;
		position: relative;
		z-index: 1;
	}

	.tdetailc .tdetailcl {
		width: 270px;
		height: 330px;
		overflow: hidden;
		background: #f1f1f1;
	}

	.tdetailc .tdetailcl img {
		width: 100%;
		display: block;
	}

	.tdetailc .tdetailcr {
		width: 1000px;
		height: auto;
	}

	.tdetailc .tdetailcr .tit {
		font-size: 32px;
		color: #2a2d37;
		line-height: 30px;
		display: flex;
		margin: 10px 0 15px 0;
	}

	.tdetailc .tdetailcr .tit span {
		margin-left: 18px;
		display: inline-block;
		width: 108px;
		height: 30px;
		line-height: 30px;
		background: url(../../assets/imgs/team_icon2.png) no-repeat left 50%;
		padding-left: 17px;
		font-size: 12px;
		color: #999999;
	}

	.tdetailc .tdetailcr .con {
		font-size: 14px;
		color: #555555;
		line-height: 28px;
		padding-top: 10px;
	}

	.tdetailc .tdetailcr .con .cont {
		border-bottom: 1px #f4f4f4 solid;
	}

	.tdetailc .tdetailcr .con .cont .num {
		font-size: 20px;
		color: #e50120;
		padding: 0 8px;
	}

	.tdetailc .tdetailcr .con .cont .fg {
		display: inline-block;
		text-align: center;
		line-height: 30px;
		cursor: pointer;
		margin-right: 10px;
	}

	.tdetailc .td_sj {
		display: block;
		width: 135px;
		height: 40px;
		line-height: 40px;
		background: url(../../assets/imgs/team_icon1.png) no-repeat 22px 50% #e50120;
		font-size: 16px;
		color: #fff;
		text-indent: 50px;
		position: absolute;
		z-index: 2;
		right: 45px;
		top: 25px;
	}

	.tdetailc .td_sj:hover {
		background: url(../../assets/imgs/team_icon1.png) no-repeat 22px 50% #b80820;
	}
</style>